<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>
<template>
  <div>
    <router-link to="/">首页</router-link> | <router-link to="/about">关于</router-link> |
    <router-link to="/full">全屏</router-link> |
    <router-link to="/rate">评分</router-link> |
    <router-link to="/transition">动画</router-link> |
    <router-link to="/vuex">vuex</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <transition name="route" mode="out-in">
      <component :is="Component" key="routePage" />
    </transition>
  </router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.route-enter-active {
  transition: 0.3s ease;
}
.route-leave-active {
  transition: 0.2s ease;
}
.route-enter,
.route-leave-to {
  opacity: 0;
}
</style>
